<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="stylesheet" th:href="@{'/webjars/layui/2.3.0/css/layui.css'}">
    <link rel="stylesheet" th:href="@{'/webjars/font-awesome/4.7.0/css/font-awesome.css'}">
    <link rel="shortcut icon" th:href="@{'/img/favicon.ico'}">
    <script language="JavaScript" th:src="@{'/webjars/jquery/3.3.1/dist/jquery.min.js'}"></script>
    <script language="JavaScript" th:src="@{'/js/dateformat.js'}" charset="utf-8"></script>
    <script language="JavaScript" th:src="@{'/js/common.js'}" charset="utf-8"></script>

</head>
<body>
<ul th:insert="~{fragment/header :: top}"></ul>
<br>
<div class="demoTable layui-col-lg-offset1">
    <div class="layui-inline layui-form-pane">
        <label class="layui-form-label">学生姓名：</label>
        <div class="layui-inline">
            <input class="layui-input layui-col-lg6 layui-form-pane" name="stuName"
                   id="stuName" autocomplete="on">
        </div>
    </div>
    <div class="layui-inline layui-form-pane">
        <label class="layui-form-label">身份证号：</label>
        <div class="layui-inline">
            <input class="layui-input layui-col-lg6 layui-form-pane" name="idCard" id="idCard"
                   lay-verify="number" autocomplete="on">
        </div>
    </div>

    <div class="layui-inline layui-form-pane">
        <label class="layui-form-label">班级</label>
        <div class="layui-inline">
            <select name="clazz.cid" id="cidSearch" class="layui-select" style="width: 120px;">
                <option th:text="请选择" th:value="请选择"></option>
                <option th:text="${clazz.getClazzName()}" th:value="${clazz.getCid()}"
                        th:each="clazz: ${clazzes}"></option>
            </select>
        </div>
    </div>
    <div class="layui-inline layui-form-pane">
        <label class="layui-form-label">申核状态</label>
        <div class="layui-inline">
            <select name="review" id="reviewSearch" class="layui-select" style="width: 120px;">
                <option th:value="-1">请选择</option>
                <option th:value="0">待申核</option>
                <option th:value="1">申核中</option>
                <option th:value="2">申核完成无误</option>
            </select>
        </div>
    </div>
    <button class="layui-btn layui-icon layui-icon-search" data-type="reload"> 搜索
    </button>
</div>
<table id="stu" lay-filter="stu"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-btn-radius layui-icon layui-icon-read" lay-event="detail">
        查看</a>

    <a class="layui-btn layui-btn-xs layui-btn-radius layui-icon layui-icon-edit" lay-event="edit"
       th:if="${session.user.userType} eq '管理员'">
        编辑</a>

    <a class="layui-btn layui-btn-radius layui-btn-xs layui-icon layui-icon-delete" lay-event="review"
       th:if="${session.user.userType} eq '管理员'">申核</a>

    <a class="layui-btn layui-btn-radius layui-btn-xs layui-icon layui-icon-delete" lay-event="review"
       th:if="${session.user.userType} eq '学生'">申请</a>

    <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-radius layui-icon layui-icon-delete" lay-event="del"
       th:if="${session.user.userType} eq '管理员'">删除</a>
</script>

<script th:inline="none">
    $(function () {
        layui.use(["table", "util", "layer"], function () {
            var $table = layui.table;
            var $utils = layui.util;
            var $layer = layui.layer;

            var $ = layui.$, active = {
                reload: function () {
                    var demoReload = $('#demoReload');
                    $table.reload('stu', {
                        where: {
                            name: $("#stuName").val(),
                            idCard: $("#idCard").val(),
                            cid: $("#cidSearch").val(),
                            reviewId: $("#reviewSearch").val(),
                        },
                        page: true,
                    });
                }
            };

            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data("type");
                active[type] ? active[type].call(this) : '';
            });
            $("#stuName").change(function () {
                $('.demoTable .layui-btn').click();
            });
            $("#idCard").change(function () {
                $('.demoTable .layui-btn').click();
            });
            $("#cidSearch").change(function () {
                $('.demoTable .layui-btn').click();
            });
            $("#reviewSearch").change(function () {
                $(".demoTable .layui-btn").click();
            });

            //第一个实例
            $table.render({
                elem: '#stu',
                height: 471,
                //数据接口,
                url: '/stu/student/stuInfo',
                //开启分页
                page: true,
                method: "post",
                //表头
                cols: [[
                    {field: 'sid', title: '学号', width: 150, align: 'center'},
                    {field: 'name', title: '姓名', width: 100, align: 'center'},
                    {field: 'birth', title: '出生年月', type: "date", templet: '#birth', width: 150, align: 'center'},
                    {field: 'gender', title: '性别', width: 70, align: 'center'},
                    {field: 'idCard', title: '省份证号', align: 'center', width: 180},
                    {field: 'address', title: '家庭住址', align: 'center', width: 180,},
                    {field: 'reviewId', title: '审核状态', align: 'center', width: 120, templet: "#reviewId"},
                    {field: 'reviewContent', title: '审核内容', align: 'center', width: 120,},
                    {field: 'clazz.cid', title: '班级编号&nbsp;', templet: "#cid", align: 'center', width: 200,},
                    {field: 'right', title: '操作', toolbar: "#barDemo", align: 'center', width: 298}
                ]],
                limit: 10,
                where: {
                    name: $("#stuName").val(),
                    idCard: $("#idCard").val(),
                    cid: $("#cidSearch").val(),
                    reviewId: $("#reviewSearch").val(),
                },
                done: function (val) {
                    $("[data-field='reviewContent']").css("display", "none");
                    $("tbody tr").each(function (trNode, i) {
                        $(this).find("[data-field='reviewId']").hover(function () {
                            var td = $(this).parent().find("[data-field='reviewContent']")[0];
                            var div = $(td).find("div");
                            var val = div.text();
                            timer = setTimeout(function () {
                                $layer.msg(val, {
                                    icon: 5,
                                    width: 100,
                                });
                            }, 1000);

                        }, function () {
                            //这里去clear
                            //如果没停留3秒,直接会被clear掉,如果停留超过3秒,也一样会被clear,但是你要做的方法已经被执行了
                            clearTimeout(timer);
                        });
                    });

                }
            });

            $table.on("tool(stu)", function (obj) {
                    console.log(obj);
                    if (obj.event === "detail") {
                        window.location.href = "/stu/student/to/stuDetail/" + obj.data.sid;
                    }

                    if (obj.event === "edit") {
                        window.location.href = "/stu/student/to/stuEdit/" + obj.data.sid;
                    }

                    if (obj.event === "del") {
                        $layer.confirm("确认删除 " + obj.data.name + " 吗？",
                            {
                                icon: 3,
                            },
                            function (res) {
                                $.ajax({
                                    url: "/stu/student/del/" + obj.data.sid,
                                    type: "post",
                                    data: {
                                        _method: "delete"
                                    },
                                    success: function (res) {
                                        if (res.code === 200) {
                                            $('.demoTable .layui-btn').click();
                                        }
                                    }
                                });
                                $layer.close(res);
                            }
                        );
                    }

                    if (obj.event === "review") {
                        var url = "/stu/student/review/" + obj.data.sid;
                        var session = $("#session").val();
                        var title = "", reviewInt = 0;
                        if (session === "管理员") {
                            reviewInt = 2;
                            title = "申核";
                        }
                        if (session === "学生") {
                            reviewInt = 1;
                            title = "申请";
                        }
                        console.log(obj.data.reviewId);
                        if (session === "管理员" && obj.data.reviewId === 1) {
                            $layer.confirm("确认" + title + "吗？",
                                {
                                    icon: 3, title: title
                                },
                                function (index) {
                                    confirmSubmit(url, title, reviewInt, "申核完成", obj);
                                    $layer.close(index);
                                });
                        }
                        if ((session === "管理员") && obj.data.reviewId != 1) {
                            msg($layer, "已经申核过了");
                        }
                        if (session === "学生" && obj.data.reviewId === 0) {
                            $layer.prompt({
                                formType: 2,
                                title: '申核',
                            }, function (value, index, elem) {
                                confirmSubmit(url, title, reviewInt, value, obj);
                                $layer.close(index);
                            });
                        }
                        if (session === "学生" && obj.data.reviewId != 0) {
                            msg($layer, "已经申请过了");
                        }
                    }
                }
            );
        });
    });
</script>

<script th:inline="javascript" type="text/html" id="birth">
    {{#
    return layui.util.toDateString(d.birth.time, 'yyyy-MM-dd')
    }}
</script>

<script th:inline="javascript" type="text/html" id="cid">
    {{#
    return d.clazz.clazzName;
    }}
</script>

<script data-th-inline="javascript" type="text/html" id="reviewId">
    {{#
    if (d.reviewId === 0) {
    return "待申核";
    }
    if (d.reviewId === 1) {
    return "申核中";
    }
    if (d.reviewId === 2) {
    return "申核完成无误";
    }
    }}
</script>


<input type="hidden" class="layui-input" th:value="${session.user.userType}" id="session">
<div th:insert="~{fragment/header :: footer}"></div>
</body>
<script language="JavaScript" th:src="@{'/webjars/layui/2.3.0/layui.all.js'}" charset="utf-8"></script>
</html>